<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <template id="t">
      <div>{{fullName}}</div>
      <div>{{result}}</div>
      <div>{{reverseMessage}}</div>
      <button @click="changeName">修改姓名</button>
    </template>

    <script src="./vue.js"></script>
    <script>
      Vue.createApp({
        template: '#t',
        data() {
          return {
            firstName: 'slim',
            lastName: 'nolan',
            score: 80,
            message: 'Hello World'
          }
        },
        computed: {
          fullName() {
            return this.firstName + ' ' + this.lastName
          },
          fullName: {
            get: function () {
              return this.firstName + ' ' + this.lastName
            },
            set: function (newValue) {
              const array = newValue.split(' ')
              this.firstName = array[0]
              this.lastName = array[1]
            }
          },
          result() {
            return this.score >= 60 ? '及格' : '不及格'
          },
          reverseMessage() {
            return this.message.split(' ').reverse().join(' ')
          }
        },
        methods: {
          changeName() {
            this.fullName = 'vmore top'
          }
        }
      }).mount('#app')
    </script>
  </body>
</html>
